<template>
  <div class="app-container">
    <!--标题-->
    <div class="title-container">
      <h3 class="title">编辑组织</h3>
    </div>

    <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24" v-if="form.parentId !== 0">
          <el-form-item label="上级部门" prop="parentId">
            <el-tree-select
              v-model="form.parentId"
              :data="deptOptions"
              :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
              value-key="deptId"
              placeholder="选择上级部门"
              check-strictly
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构代码" prop="orgCode">
            <el-input v-model="form.orgCode" placeholder="请输入机构代码" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人数概况" prop="staffCount">
            <el-input v-model="form.staffCount" placeholder="请输入人数概况" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作地点" prop="locationName">
            <el-select v-model="form.locationName" placeholder="请选择工作地点" clearable style="width: 100%">
              <el-option
                v-for="location in workLocations"
                :key="location.posId"
                :label="location.locationName"
                :value="location.locationName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组织概述" prop="orgOverview">
            <el-input type="textarea" v-model="form.orgOverview" :rows="3" placeholder="请输入组织概况" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getDept, updateDept, listDeptExcludeChild } from '@/api/system/dept';
import { listLocation } from '@/api/zuzhi/location'

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict('sys_normal_disable');

const router = useRouter();
const deptOptions = ref([]);
const deptRef = ref(null);
const workLocations = ref([]);

const data = reactive({
  form: {
    deptId: undefined,
    parentId: undefined,
    deptName: undefined,
    orderNum: 0,
    leader: undefined,
    phone: undefined,
    email: undefined,
    orgCode: undefined,
    staffCount: undefined,
    orgOverview: undefined,
    locationName: undefined,
    status: '0'
  },
  rules: {
    parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
    deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
    orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
    email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
    locationName: [{ required: true, message: '工作地点不能为空', trigger: 'change' }]
  }
});

const {form, rules } = toRefs(data);

/** 初始化数据 */
onMounted(() => {
  const deptId = router.currentRoute.value.query.deptId;
  if (deptId) {
    // 获取部门数据
    getDept(deptId).then(response => {
      Object.assign(form.value, response.data);
    });
    // 获取上级部门选项
    listDeptExcludeChild(deptId).then(response => {
      deptOptions.value = proxy.handleTree(response.data, 'deptId');
    });
    // 获取工作地点列表
    listLocation().then(response => {
      workLocations.value = response.rows;
    });
  }
});

/** 提交按钮 */
function submitForm() {
  console.log(form.value)
  deptRef.value.validate(valid => {
    if (valid) {
      updateDept(form.value).then(response => {
        proxy.$modal.msgSuccess('修改成功');
        router.back();
      });
    }
  });
}

/** 取消按钮 */
function cancel() {
  router.back();
}
</script>

<style scoped lang="scss">
.title-container {
  position: relative;
  padding: 1px 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.title-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #409EFF;
}

.dialog-footer {
  text-align: right;
  padding: 10px 0;
}
</style>